<template>
  <div>
    <div class="search-div">
      <el-form label-width="70px" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="品牌">
              <el-select
                class="m-2"
                placeholder="选择品牌"
                size="small"
                style="width: 100%"
                v-model="brandId"
              >
                <el-option
                  v-for="item in brandList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分类">
              <el-cascader
                v-model="categoryIds"
                :props="props"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display:flex">
          <el-button type="primary" size="small" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="small" @click="reset">重置</el-button>
        </el-row>
      </el-form>
    </div>

    <div class="tools-div">
      <el-button type="success" size="small" @click="dialogVisible = true">
        添 加
      </el-button>
    </div>

    <el-table :data="list" style="width: 100%">
      <el-table-column prop="categoryName" label="分类" />
      <el-table-column prop="brandName" label="品牌" />
      <el-table-column prop="logo" label="品牌图标" #default="scope">
        <img :src="scope.row.logo" width="50" />
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作" align="center" width="200" #default="scope">
        <el-button
          type="primary"
          size="small"
          @click="handleShowEditDialog(scope.row)"
        >
          修改
        </el-button>
        <el-button type="danger" size="small" @click="handleDelete(scope.row)">
          删除
        </el-button>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[1, 2, 3, 4, 5]"
      layout="total, sizes, prev, pager, next"
      @size-change="fetchData"
      @current-change="fetchData"
      :total="total"
    />
    <!-- 新增分类品牌对话框 -->
    <div>
      <el-dialog v-model="dialogVisible" title="添加或修改" width="30%">
        <el-form label-width="120px">
          <el-form-item label="品牌">
            <el-select
              class="m-2"
              placeholder="选择品牌"
              size="small"
              v-model="categoryBrand.brandId"
            >
              <el-option
                v-for="item in brandList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="分类">
            <el-cascader v-model="categoryBrand.categoryId" :props="props" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSaveOrUpdateCategoryBrand">
              提交
            </el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import {
  GetCategoryBrandPage,
  GetCategoryBrandById,
  DeleteCategoryBrandById,
  SaveCategoryBrand,
  UpdateCategoryBrand,
} from '@/api/categoryBrand'
import { GetAllBrand } from '@/api/brand'
import { GetCategoriesByPid } from '@/api/category'
import { ElMessage } from 'element-plus'
let list = ref([])
let pageNum = ref(1)
let pageSize = ref(3)
let total = ref(0)
let brandList = ref([])
let brandId = ref(null)
let categoryIds = ref([])
//=== 新增分类品牌
let dialogVisible = ref(false)
let categoryBrand = ref({})
let handleSaveCategoryBrand = async () => {
  console.log(categoryBrand.value)
  categoryBrand.value.categoryId =
    categoryBrand.value.categoryId[categoryBrand.value.categoryId.length - 1]
  console.log(categoryBrand.value)
  await SaveCategoryBrand(categoryBrand.value)
  ElMessage.success('新增成功')
  fetchData()
  dialogVisible.value = false
  //新增成功清除缓存
  categoryBrand.value = {}
}
//=== 删除分类品牌
let handleDelete = async row => {
  await DeleteCategoryBrandById(row.id)
  ElMessage.success('删除成功')
  fetchData()
}
//=== 更新分类品牌
let handleShowEditDialog = async row => {
  const { data } = await GetCategoryBrandById(row.id)
  //只回显品牌  分类不能回显
  categoryBrand.value = data
  dialogVisible.value = true
}
let handleUpdateCategoryBrand = async () => {
  categoryBrand.value.categoryId =
    categoryBrand.value.categoryId[categoryBrand.value.categoryId.length - 1]
  await UpdateCategoryBrand(categoryBrand.value)
  ElMessage.success('更新成功')
  fetchData()
  dialogVisible.value = false
  //更新成功清除缓存
  categoryBrand.value = {}
}
let handleSaveOrUpdateCategoryBrand = () => {
  if (categoryBrand.value.id) {
    //更新
    handleUpdateCategoryBrand()
  } else {
    handleSaveCategoryBrand()
  }
}
//props中定义的最外层的值 就是点击级联选择器要使用的第一次加载的配置
let props = ref({
  //如何解析data数据的配置
  value: 'id',
  label: 'name',
  lazy: true, //懒加载配置
  leaf: 'leaf', //表示是否是叶子节点  true表示是叶子节点没有下一级
  //触发懒加载执行的函数
  lazyLoad: async (node, resolve) => {
    // console.log(node)
    //value: 1, //表示选中一个节点时它的值(赋值给绑定的变量)
    //   label: '标题', //节点展示出来的标题
    // let data = [
    //   {
    //     value: 1,
    //     label: 'title-1',
    //     leaf: false,
    //   },
    // ]
    //判断 如果是第一次触发懒加载，查询pid=0的分类数据展示
    const { data } = await GetCategoriesByPid(node.root ? 0 : node.value)
    // let tmp = []
    data.forEach(category => {
      //   tmp.push({
      //     value: category.id,
      //     label: category.name,
      //     leaf: !category.hasChildren,
      //   })
      category.leaf = !category.hasChildren
    })

    resolve(data)
  },
})
let fetchData = async () => {
  const { data } = await GetCategoryBrandPage(
    pageNum.value,
    pageSize.value,
    brandId.value,
    categoryIds.value[categoryIds.value.length - 1]
  )
  total.value = data.total
  list.value = data.list
}
let reset = () => {
  brandId.value = null
  categoryIds.value = []
  pageNum.value = 1
  pageSize.value = 3
  fetchData()
}
onMounted(() => {
  fetchData()
  //查询所有的品牌
  fetchAllBrand()
})

let fetchAllBrand = async () => {
  const { data } = await GetAllBrand()
  brandList.value = data
}
//搜索按钮事件函数
let handleSearch = () => {
  console.log(brandId.value, categoryIds.value)
  //提交条件查询的请求： 使用brandId和categoryIds中的最后一个提交
  console.log(brandId.value, categoryIds.value[categoryIds.value.length - 1])
  fetchData()
}
</script>
<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>
